<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>DOM Assistant demo - DOM Assistant, the modular lightweight JavaScript library</title>
	<link rel="stylesheet" href="css/domassistant.css" type="text/css">
	
	<script type="text/javascript" src="../trunk/modules/DOMAssistant.js"></script>
	<script type="text/javascript" src="../trunk/modules/DOMAssistantAJAX.js"></script>
	<script type="text/javascript" src="../trunk/modules/DOMAssistantContent.js"></script>
	<script type="text/javascript" src="../trunk/modules/DOMAssistantCSS.js"></script>
	<script type="text/javascript" src="../trunk/modules/DOMAssistantEvents.js"></script>
	<script type="text/javascript" src="../trunk/modules/DOMAssistantLoad.js"></script>

	<!--<script type="text/javascript" src="../trunk/DOMAssistantComplete.js"></script>-->
	<!--<script type="text/javascript" src="../trunk/DOMAssistantCompressed.js"></script>-->
	
	<script type="text/javascript">
		function test (content) {
			this.replaceContent(content);
			this.addClass("testing");
		}
		DOMAssistant.DOMReady(function () {
			try	{
				var apa = $("#container").elmsByClass("one").addClass("testing");
				return alert("apa: " + apa.length);
				$(document).elmsByClass("item").replaceContent("apa");
				$(document).addEvent("DOMMouseScroll", function () {
					alert("Hej");
				});
			}
			catch (e) {
				alert(e);
			}
			$("#container").post("ajax.html?apa=true", test);
			//$("container").replaceClass("item", "testing");
			$("container").addEvent("click", function (evt) {
				alert(this + "\n" + evt + "\n" + evt.eventTarget);
				//$(this).preventDefault(evt);
				//$(this).cancelBubble(evt);
				//return false;
			});
			
			apa = $('#fm1 p:not([#cfm])')
			//alert(apa.join("\n"));
			
			// $("dn-link").addEvent("click", function (evt) {
			// 				alert(this + "\n" + evt + "\n" + evt.eventTarget);
			// 				return false;
			// 			});
			
			try {
				//$("#link-parent").create("p", null, true, "Da MAN!").addClass("testing");
			}
			catch (e) {
				alert(e);
			}	
			
			//$("container").replaceContent("En liten apa");//load("ajax.html");
			$("disabled-element").disabled = true;
			var itemToTest = 10;
			switch(itemToTest) {
				case -8:
					// #container
					$("* p").addClass("testing");
					break;
				case -7:
					// #container
					$("div#container p").addClass("testing").each(function  () {
						this.addClass("test-again")
						this.addEvent("click", function  () {
							alert("Hej");
						});
					});
					break;
				case -6:
					// #container
					$("p:only-of-type").addClass("testing");
					break;
				case -5:
					// #container
					$("div#pseudo-test p:nth-last-of-type(2)").addClass("testing");
					break;
				case -4:
					// #container
					$("div#container p:first-of-type").addClass("testing");
					break;
				case -3:
					// #container
					$("div#container p:last-of-type").addClass("testing");
					break;
				case -2:
					// #container
					$("div#container p:nth-of-type(7)").addClass("testing");
					break;
				case -1:
					// #container
					$("*").addClass("testing");
					break;
				case 0:
					// #container
					$("div#container").addClass("testing");
					break;
				case 1:
					// .item
					$(".item").addClass("testing");
					break;
				case 2:
					// #container.item
					$("body .item").addClass("testing");
					break;
				case 3:
					// p.info.error
					$("#container.item.test-2").addClass("testing");
					break;
				case 4:
					// div p
					$("div p").addClass("testing");
					break;
				case 5:
					// div > p
					$("div > p[id=first-paragraph]").addClass("testing");
					break;
				case 6:
					// p + p
					$("#container p + p[name=gris]").addClass("testing");
					break;
				case 7:
					// div ~ p
					$("h3 ~ ul").addClass("testing");
					break;
				case 8:
					// [id]
					$("div[id]").addClass("testing");
					break;
				case 9:
					// [id=container]
					$("div[id=pseudo-test]").addClass("testing");
					break;
				case 10:
					// [type=text][value=Yes]
					$("div#main-content input[type=text][value=Yes]").addClass("testing");
					break;
				case 11:
					// [id^=empt]
					$("div[id^=empt]").addClass("testing");
					break;
				case 12:
					// [id$=parent]
					$("div[id$=ainer]").addClass("testing");
					break;
				case 13:
					// [id*=mpt]
					$("div[id*=mpt]").addClass("testing");
					break;
				case 14:
					// div:first-child
					$("em:first-child").addClass("testing");
					break;
				case 15:
					// div:last-child
					$("em:last-child").addClass("testing");
					break;
				case 16:
					// div:only-child
					$("em:only-child").addClass("testing");
					break;
				case 17:
					// div:empty
					$("div:empty").addClass("testing");
					break;
				case 18:
					// *:not(div)
					//$("*:not(p)").addClass("testing");
					$("div:not([id*=mpt])").addClass("testing");
					break;
				case 19:
					// div:nth-child(2)
					$("#pseudo-test:nth-child(2)").addClass("test-again");
					break;
				case 20:
					// div:nth-child(odd)
					$("#pseudo-test:nth-child(odd)").addClass("test-again");
					break;
				case 21:
					// div:nth-child(even)
					$("#pseudo-test:nth-child(even)").addClass("test-again");
					break;
				case 22:
					// div:nth-child(5n+3)
					$("#pseudo-test:nth-child(5n+3)").addClass("test-again");
					break;
				case 23:
					// input:enabled
					$("input:enabled").addClass("test-again");
					break;
				case 24:
					// input:disabled
					$("input:disabled").addClass("test-again");
					break;
				case 25:
					// input:checked
					$("input:checked").addClass("margin");
					break;
				case 26:
					// Multiple rules
					$("a, em:first-child").addClass("testing");
					break;
			}
			try	{
				//var xPathNodes = document.evaluate(".//input[contains(@checked, 'checked')]", document, null, 0, null);
				/*var xPathNodes = document.evaluate(".//*[@id = 'container']//p/following-sibling::*[1]/self::p[@name='gris']", document, null, 0, null);
								var node = xPathNodes.iterateNext();
								apa = [];
								while(node) {
									apa.push(node);
									node = xPathNodes.iterateNext();
								}
								alert("Result: " + apa);*/
			}
			catch(e) {
				alert(e);
			}
		});
	</script>
	
	<style type="text/css">
		
		.testing{
			display: block;
			color: #000 !important;
			background: yellow;
			padding: 10px;
			border: 1px solid red;			
		}
		.test-again{
			display: block;
			padding: 10px;
			border: 10px solid green;
		}
		.margin{
			margin: 50px 100px;
		}
	</style>
	<!--[if lt IE 7]>
		<link rel="stylesheet" href="css/ie.css" type="text/css">
	<![endif]-->
</head>

<body>

	<form id="fm1">
	  <p>First P</p>
	  <p>Second P</p>
	  <p id="cfm">CFM P</p>
	</form>
	
	<div id="empty" style="width: 100px; height: 100px; border: 1px solid blue;"></div>

	<div id="link-parent">
		<a id="dn-link" href="http://www.dn.se">DN</a>
	</div>
	
	<p>No DIV parent</p>
	
	<h6>
		<em>Hej</em>
	</h6>
	<h6>
		<em>Hej</em>
		<em>Hej 2</em>
		<em>Hej 3</em>
	</h6>
	
	<div class="item">
		<p>DIV with class="item"</p>
	</div>
	
	<p class="pish">P child to #container</p>
	
	<div id="container" class="item test-2 test-3 test-again">
		<p class="pish">P child to #container</p>
		<div id="pseudo-test-parent">
			<div id="pseudo-test">
				<!-- <span>Span 1</span>
																								<div>Div 1</div>
																								<span>Span 1</span> -->
				<p onclick="alert('Gris');">P 1</p>
				<p>P 2</p>
				<p>P 3</p>
				<!-- <span>Span 2</span> -->
				<p>P 4</p>
				<p name="gris">P 5</p>
				<p>P 6</p>
				<p name="gris">P 7</p>
				<p>P 8</p>
<!-- <p>P 9</p>
								<p>P 10</p>
								<p>P 11</p>
								<p>P 12</p>
								<p>P 13</p>
								<p>P 14</p>
								<p>P 15</p>
								<p>P 16</p>
								<p>P 17</p>
								<p>P 18</p>
								<p>P 19</p>
								<p>P 20</p>
								<p>P 21</p>
								<p>P 22</p>
								<p>P 23</p>
								<p>P 24</p>
								<p>P 25</p>
								<p>P 26</p>
								<p>P 27</p>
								<p>P 28</p>
								<p>P 29</p> -->
				<span>Monkey</span>
			</div>
		</div>	
		<div id="inner-container" class="inner">
			<input id="gris" type="text" name="some_name" value="Yes" class="one"><br>
			<div id="main-content" class="more">
				<input id="gris" type="text" name="some_name" value="Yes" class="one"><br>
				<input type="text" name="some_name" value=""><br>
				<input type="text" id="disabled-element" value="Disabled" class="one"><br>
				<input type="text" name="some_name" value=""><br>
				<input type="radio" name="some_name" value="apa" checked="checked"><br><br>
				<input type="radio" name="some_namee" value="gris"><br>
				<input type="checkbox" name="some_name" value=""><br>
				<input type="checkbox" name="some_nameee" value="" checked="checked"><br>
				<input type="button" name="some_name" value="Knapp"><br>
				
				<h1><a href="index.htm">ScriptTest</a></h1>
				<h2 id="domass-demo-title">Test</h2>
				<p id="first-paragraph" class="paragraph">When you click the link below, a short demo of some of the DOMAssistant methods will start. It will display what code is run (within this web page), and the result of that call. Note! This requires that you have JavaScript activated, since it is a demo of JavaScript calls.</p>
				<p class="paragraph"><a id="start-demo" href="#demo">Start the demo</a></p>
			</div>
			
			<div id="navigation">
				<div id="navigation-inner">
					<p><span>Hejsan</span><em>Current version <span class="next">is</span> 2.0, released September 19th 2007.</em></p>
					<p><span>Hejsan</span><em>November 8th 2007 <span class="da-span">update</span>: <code>elmsByAttribute</code> update. <a href="Release-notes.txt">Release notes</a></em></p>
					<h3>Information</h3>
					<ul>
						<li class="apa"><a href="index.htm">Introduction</a></li>
						<li class="apa"><a href="compatibility.htm">Compatibility</a></li>
						<li class="apa"><a href="demo.htm" class="selected">Demo</a></li>
					</ul>
				
					<h3>Module documentation</h3>
					<ul>
						<li><a href="modules-domassistant.htm">DOMAssistant</a></li>
						<li><a href="modules-domassistant-ajax.htm">DOMAssistantAJAX</a></li>
						<li><a href="modules-domassistant-content.htm">DOMAssistantContent</a></li>
						<li><a href="modules-domassistant-css.htm">DOMAssistantCSS</a></li>
						<li><a href="modules-domassistant-events.htm">DOMAssistantEvents</a></li>						
						<li><a href="modules-domassistant-load.htm">DOMAssistantLoad</a></li>
						<li><a href="documentation/DOMAssistant-documentation.pdf">Complete documentation (PDF)</a></li>
						<li><a href="documentation/DOMAssistant-diagram.pdf">Diagram with all modules and methods (PDF)</a></li>
					</ul>
	
					<h3>Downloads</h3>
					
					<h4>Complete files with all modules</h4>
					<ul>
						<li><a href="js/DOMAssistantCompressed.js">Compressed (10 kb)</a></li>
						<li><a href="js/DOMAssistantComplete.js">Uncompressed (16 kb)</a></li>
					</ul>
					
					<h4>Module by module</h4>
					<ul>
						<li><a href="js/modules/DOMAssistant-modules.zip">All DOMAssistant modules ZIP file (5 kb)</a></li>
						<li><a href="js/modules/DOMAssistant.js">DOMAssistant (4.2 kb)</a></li>
						<li><a href="js/modules/DOMAssistantAJAX.js">DOMAssistantAJAX (1.4 kb)</a></li>
						<li><a href="js/modules/DOMAssistantContent.js">DOMAssistantContent (3.4 kb)</a></li>
						<li><a href="js/modules/DOMAssistantCSS.js">DOMAssistantCSS (2.5 kb)</a></li>
						<li><a href="js/modules/DOMAssistantEvents.js">DOMAssistantEvents (2.2 kb)</a></li>
						<li><a href="js/modules/DOMAssistantLoad.js">DOMAssistantLoad (2.1 kb)</a></li>
					</ul>
								
					<h3>Comments/updates</h3>
					<ul>
						<li><a href="http://www.robertnyman.com/2007/01/25/domass-the-dom-assistant/">First release blog post with comments and information</a></li>
						<li><a href="http://www.robertnyman.com/2007/09/20/releasing-domassistant-20-chainability-ajax-module-domready-xpath-and-more/">Version 2.0 release blog post with comments and information</a></li>
					</ul>
					
					<h3>Sign up for updates</h3>
					<p>Send an e-mail to domassistant [at] robertnyman [dot] com to verify your e-mail address and receive information about updates</p>
				
					<h3>Contact</h3>
					<ul>
						<li><a href="http://www.robertnyman.com/about">Contact the author</a></li>
					</ul>
				</div>	
				
			</div>		
		</div>
		
		<div id="footer">
			Created by Robert Nyman, <a href="http://www.robertnyman.com">http://www.robertnyman.com</a>
		</div>
		
	</div>
	
	
</body>
</html>